# Quick Start

import { PackageManagerTabs } from '@rspress/core/theme'

## 1. Initialize Project

### Method 1: Create via CLI

You can create a Zess project using the `@zessjs/cli` cli:

<PackageManagerTabs
  command={{
    npm: 'npx -p @zessjs/cli init my-app',
    yarn: 'yarn dlx -p @zessjs/cli init my-app',
    pnpm: 'pnpx -p @zessjs/cli init my-app',
    bun: 'bunx -p @zessjs/cli init my-app',
  }}
/>

Here, `my-app` is the name of the project directory to be created. After running the command, simply follow the prompts to enter the project name and select a template to quickly create a Zess project.

<img
  src="https://pic1.imgdb.cn/item/68dea750c5157e1a885103f9.gif"
  alt="Zess CLI Usage"
/>

The newly created Zess project comes pre-configured with a complete development toolchain, including a routing system, the Vitest testing framework, as well as Tailwind CSS, ESLint, and Prettier, making it ready-to-use out of the box. Its detailed file structure is as follows:

```text
my-app/
├── .gitignore
├── README.md
├── package.json
├── eslint.config.ts
├── index.html
├── tsconfig.json
├── vite.config.ts
├── public/
│   └── zess.svg
├── src/
│   ├── App.tsx
│   ├── assets/
│   │   ├── style.css
│   │   └── vite.svg
│   └── pages/
│       ├── ConditionalPage.tsx
│       ├── CounterPage.tsx
│       ├── HomePage.tsx
│       └── ListPage.tsx
└── tests/
    └── HelloWorld.test.tsx
```

### Method 2: Manual Creation

First, you can choose an existing project directory, or initialize a new project using the following command:

```bash
mkdir my-app && cd my-app && npm init -y
```

Next, install the Zess core library using npm, pnpm, yarn, or bun:

<PackageManagerTabs command="install @zessjs/core" />

Then install the Zess JSX compiler plugin (if Vite is not installed, please install it as well):

<PackageManagerTabs command="install @zessjs/vite-plugin -D" />

Add the following scripts to your `package.json`:

```json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}
```

Import `@zessjs/vite-plugin` in your Vite configuration:

```ts title="vite.config.ts"
import { defineConfig } from 'vite'
import zess from '@zessjs/vite-plugin'

export default defineConfig({
  plugins: [zess()],
})
```

Also, create a new `tsconfig.json` with the following content:

```json
{
  "compilerOptions": {
    "target": "ESNext",
    "jsx": "preserve",
    "jsxImportSource": "@zessjs/core",
    "lib": ["ESNext", "DOM", "DOM.Iterable"],
    "moduleDetection": "force",
    "module": "preserve",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "types": ["vite/client"],
    "strict": true,
    "noUnusedLocals": true,
    "declaration": true,
    "noEmit": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "verbatimModuleSyntax": true,
    "skipLibCheck": true
  },
  "include": ["src"]
}
```

## 2. Start Development Server

Run the following command to start the development server:

```bash
npm run dev
```

This command will start the Vite development server, which runs by default on `http://localhost:5173`. You can visit this address in your browser to see the project in action.

:::tip TIP

When running the `dev` command, you can specify the port or host using the `--port` or `--host` parameters, for example: `npm run dev -- --port 8080 --host 0.0.0.0`.

:::

## 3. Build for Production

Run the following command to build the project for production:

```bash
npm run build
```

By default, the build output will be located in the `dist` directory.

## 4. Preview Build Locally

Run the following command to start a local preview server:

```bash
npm run preview
```

This command will start a local server to preview the built project.
